<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        form {
            margin: 15px 0;
        }
        fieldset {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
        label {
            display: block;
            margin: 10px 0 5px;
            font-weight: bold;
        }
        input, select, textarea {
            margin-bottom: 15px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
        }
        input[type="radio"], input[type="checkbox"] {
            width: auto;
            margin-right: 5px;
        }
        input[type="color"] {
            height: 40px;
            padding: 2px;
        }
        input[type="range"] {
            padding: 0;
        }
        input[type="submit"], input[type="reset"], input[type="button"] {
            background-color: #0066cc;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            width: auto;
        }
        input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
            background-color: #0055aa;
        }
        .radio-group, .checkbox-group {
            margin-bottom: 15px;
        }
        .radio-group label, .checkbox-group label {
            display: inline;
            font-weight: normal;
        }
        progress, meter {
            width: 100%;
            height: 30px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <nav>
        <a href="html5-basic-structure.html">基础结构</a>
        <a href="html5-text-tags.html">文本标签</a>
        <a href="html5-links-images.html">链接和图像</a>
        <a href="html5-lists.html">列表</a>
        <a href="html5-tables.html">表格</a>
        <a href="html5-forms.html">表单</a>
        <a href="html5-semantic-tags.html">语义化标签</a>
        <a href="html5-multimedia.html">多媒体标签</a>
    </nav>

    <h1>HTML5 表单</h1>
    
    <section>
        <h2>基本表单结构</h2>
        <div class="example">
            <h3>示例：</h3>
            <div class="code">
                &lt;form action="/submit" method="post"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;个人信息&lt;/legend&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="name"&gt;姓名:&lt;/label&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="name" name="name" required&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="email"&gt;邮箱:&lt;/label&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="email" id="email" name="email" required&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="submit" value="提交"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;<br>
                &lt;/form&gt;
            </div>
            
            <div class="preview">
                <form action="#" method="post" onsubmit="event.preventDefault(); alert('表单已提交（示例）')">
                    <fieldset>
                        <legend>个人信息</legend>
                        
                        <label for="name">姓名:</label>
                        <input type="text" id="name" name="name" required>
                        
                        <label for="email">邮箱:</label>
                        <input type="email" id="email" name="email" required>
                        
                        <input type="submit" value="提交">
                    </fieldset>
                </form>
            </div>
            
            <h3>表单结构说明：</h3>
            <ul>
                <li><strong>&lt;form&gt;</strong> - 定义表单
                    <ul>
                        <li><strong>action</strong> - 指定表单提交的地址</li>
                        <li><strong>method</strong> - 指定提交方法（get 或 post）</li>
                    </ul>
                </li>
                <li><strong>&lt;fieldset&gt;</strong> - 对表单元素进行分组</li>
                <li><strong>&lt;legend&gt;</strong> - 为 fieldset 提供标题</li>
                <li><strong>&lt;label&gt;</strong> - 为表单元素提供标签，提高可访问性</li>
                <li><strong>&lt;input&gt;</strong> - 定义输入字段
                    <ul>
                        <li><strong>type</strong> - 指定输入类型</li>
                        <li><strong>id</strong> - 元素的唯一标识符，用于与 label 关联</li>
                        <li><strong>name</strong> - 提交表单时的字段名</li>
                        <li><strong>required</strong> - 指定字段为必填</li>
                    </ul>
                </li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>输入类型</h2>
        <div class="example">
            <h3>文本输入</h3>
            <div class="code">
                &lt;!-- 文本输入 --&gt;<br>
                &lt;input type="text" placeholder="请输入用户名"&gt;<br><br>
                
                &lt;!-- 密码输入 --&gt;<br>
                &lt;input type="password" placeholder="请输入密码"&gt;<br><br>
                
                &lt;!-- 数字输入 --&gt;<br>
                &lt;input type="number" min="1" max="100" step="1"&gt;
            </div>
            
            <div class="preview">
                <label for="username">用户名:</label>
                <input type="text" id="username" placeholder="请输入用户名">
                
                <label for="password">密码:</label>
                <input type="password" id="password" placeholder="请输入密码">
                
                <label for="quantity">数量 (1-100):</label>
                <input type="number" id="quantity" min="1" max="100" step="1" value="1">
            </div>
        </div>
        
        <div class="example">
            <h3>日期和时间输入</h3>
            <div class="code">
                &lt;!-- 日期选择器 --&gt;<br>
                &lt;input type="date" min="2023-01-01" max="2023-12-31"&gt;<br><br>
                
                &lt;!-- 时间选择器 --&gt;<br>
                &lt;input type="time"&gt;<br><br>
                
                &lt;!-- 日期时间选择器 --&gt;<br>
                &lt;input type="datetime-local"&gt;
            </div>
            
            <div class="preview">
                <label for="meeting-date">会议日期:</label>
                <input type="date" id="meeting-date" min="2023-01-01" max="2023-12-31">
                
                <label for="meeting-time">会议时间:</label>
                <input type="time" id="meeting-time">
                
                <label for="meeting-datetime">会议日期和时间:</label>
                <input type="datetime-local" id="meeting-datetime">
            </div>
        </div>
        
        <div class="example">
            <h3>其他输入类型</h3>
            <div class="code">
                &lt;!-- 颜色选择器 --&gt;<br>
                &lt;input type="color"&gt;<br><br>
                
                &lt;!-- 范围滑块 --&gt;<br>
                &lt;input type="range" min="0" max="100" value="50"&gt;<br><br>
                
                &lt;!-- 文件上传 --&gt;<br>
                &lt;input type="file" accept="image/*" multiple&gt;<br><br>
                
                &lt;!-- 隐藏字段 --&gt;<br>
                &lt;input type="hidden" name="user_id" value="123"&gt;
            </div>
            
            <div class="preview">
                <label for="favorite-color">选择颜色:</label>
                <input type="color" id="favorite-color" value="#0066cc">
                
                <label for="volume">音量 (0-100):</label>
                <input type="range" id="volume" min="0" max="100" value="50">
                
                <label for="profile-pic">上传头像:</label>
                <input type="file" id="profile-pic" accept="image/*">
                
                <p><small>隐藏字段不会显示在页面上，但会随表单一起提交</small></p>
            </div>
        </div>
        
        <div class="example">
            <h3>单选按钮和复选框</h3>
            <div class="code">
                &lt;!-- 单选按钮 --&gt;<br>
                &lt;input type="radio" name="gender" id="male" value="male"&gt;<br>
                &lt;label for="male"&gt;男&lt;/label&gt;<br>
                &lt;input type="radio" name="gender" id="female" value="female"&gt;<br>
                &lt;label for="female"&gt;女&lt;/label&gt;<br><br>
                
                &lt;!-- 复选框 --&gt;<br>
                &lt;input type="checkbox" name="hobby" id="reading" value="reading"&gt;<br>
                &lt;label for="reading"&gt;阅读&lt;/label&gt;<br>
                &lt;input type="checkbox" name="hobby" id="sports" value="sports"&gt;<br>
                &lt;label for="sports"&gt;运动&lt;/label&gt;
            </div>
            
            <div class="preview">
                <p><strong>性别:</strong></p>
                <div class="radio-group">
                    <input type="radio" name="gender" id="male" value="male">
                    <label for="male">男</label>
                </div>
                <div class="radio-group">
                    <input type="radio" name="gender" id="female" value="female">
                    <label for="female">女</label>
                </div>
                
                <p><strong>爱好:</strong></p>
                <div class="checkbox-group">
                    <input type="checkbox" name="hobby" id="reading" value="reading">
                    <label for="reading">阅读</label>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" name="hobby" id="sports" value="sports">
                    <label for="sports">运动</label>
                </div>
            </div>
        </div>
        
        <div class="example">
            <h3>按钮类型</h3>
            <div class="code">
                &lt;!-- 提交按钮 --&gt;<br>
                &lt;input type="submit" value="提交"&gt;<br><br>
                
                &lt;!-- 重置按钮 --&gt;<br>
                &lt;input type="reset" value="重置"&gt;<br><br>
                
                &lt;!-- 普通按钮 --&gt;<br>
                &lt;input type="button" value="点击我" onclick="alert('Hello!')"&gt;
            </div>
            
            <div class="preview">
                <input type="submit" value="提交" onclick="event.preventDefault(); alert('表单已提交（示例）')">
                <input type="reset" value="重置">
                <input type="button" value="点击我" onclick="alert('Hello!')">
            </div>
        </div>
    </section>
    
    <section>
        <h2>表单元素</h2>
        <div class="example">
            <h3>下拉选择框</h3>
            <div class="code">
                &lt;!-- 下拉选择框 --&gt;<br>
                &lt;label for="country"&gt;国家:&lt;/label&gt;<br>
                &lt;select id="country" name="country"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=""&gt;请选择&lt;/option&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="cn"&gt;中国&lt;/option&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="us"&gt;美国&lt;/option&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="jp"&gt;日本&lt;/option&gt;<br>
                &lt;/select&gt;
            </div>
            
            <div class="preview">
                <label for="country">国家:</label>
                <select id="country" name="country">
                    <option value="">请选择</option>
                    <option value="cn">中国</option>
                    <option value="us">美国</option>
                    <option value="jp">日本</option>
                </select>
            </div>
        </div>
        
        <div class="example">
            <h3>分组的下拉选择框</h3>
            <div class="code">
                &lt;!-- 分组的下拉选择框 --&gt;<br>
                &lt;select&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;optgroup label="亚洲"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="cn"&gt;中国&lt;/option&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="jp"&gt;日本&lt;/option&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/optgroup&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;optgroup label="欧洲"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="fr"&gt;法国&lt;/option&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="de"&gt;德国&lt;/option&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/optgroup&gt;<br>
                &lt;/select&gt;
            </div>
            
            <div class="preview">
                <label for="country-group">选择国家:</label>
                <select id="country-group">
                    <optgroup label="亚洲">
                        <option value="cn">中国</option>
                        <option value="jp">日本</option>
                    </optgroup>
                    <optgroup label="欧洲">
                        <option value="fr">法国</option>
                        <option value="de">德国</option>
                    </optgroup>
                </select>
            </div>
        </div>
        
        <div class="example">
            <h3>多行文本框</h3>
            <div class="code">
                &lt;!-- 多行文本框 --&gt;<br>
                &lt;label for="message"&gt;留言:&lt;/label&gt;<br>
                &lt;textarea id="message" name="message" rows="4" cols="50"&gt;&lt;/textarea&gt;
            </div>
            
            <div class="preview">
                <label for="message">留言:</label>
                <textarea id="message" name="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>
            </div>
        </div>
        
        <div class="example">
            <h3>数据列表（自动完成）</h3>
            <div class="code">
                &lt;!-- 数据列表（自动完成） --&gt;<br>
                &lt;label for="browser"&gt;选择浏览器:&lt;/label&gt;<br>
                &lt;input list="browsers" name="browser" id="browser"&gt;<br>
                &lt;datalist id="browsers"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="Chrome"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="Firefox"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="Safari"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="Edge"&gt;<br>
                &lt;/datalist&gt;
            </div>
            
            <div class="preview">
                <label for="browser">选择浏览器:</label>
                <input list="browsers" name="browser" id="browser">
                <datalist id="browsers">
                    <option value="Chrome">
                    <option value="Firefox">
                    <option value="Safari">
                    <option value="Edge">
                </datalist>
            </div>
        </div>
        
        <div class="example">
            <h3>输出元素</h3>
            <div class="code">
                &lt;!-- 输出元素 --&gt;<br>
                &lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="number" id="a" value="0"&gt; +<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="number" id="b" value="0"&gt; =<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;output name="result" for="a b"&gt;0&lt;/output&gt;<br>
                &lt;/form&gt;
            </div>
            
            <div class="preview">
                <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
                    <label for="a">第一个数:</label>
                    <input type="number" id="a" value="0" style="width: 80px;">
                    <span style="margin: 0 10px;">+</span>
                    <label for="b">第二个数:</label>
                    <input type="number" id="b" value="0" style="width: 80px;">
                    <span style="margin: 0 10px;">=</span>
                    <output name="result" for="a b">0</output>
                </form>
            </div>
        </div>
        
        <div class="example">
            <h3>进度条和度量器</h3>
            <div class="code">
                &lt;!-- 进度条 --&gt;<br>
                &lt;label for="file"&gt;下载进度:&lt;/label&gt;<br>
                &lt;progress id="file" value="32" max="100"&gt; 32% &lt;/progress&gt;<br><br>
                
                &lt;!-- 度量器 --&gt;<br>
                &lt;label for="disk"&gt;磁盘使用量:&lt;/label&gt;<br>
                &lt;meter id="disk" value="0.5" min="0" max="1"&gt;50%&lt;/meter&gt;
            </div>
            
            <div class="preview">
                <label for="file">下载进度:</label>
                <progress id="file" value="32" max="100"> 32% </progress>
                
                <label for="disk">磁盘使用量:</label>
                <meter id="disk" value="0.5" min="0" max="1" low="0.3" high="0.7" optimum="0.5">50%</meter>
            </div>
        </div>
    </section>
    
    <section>
        <h2>表单属性和验证</h2>
        <div class="example">
            <h3>常用表单属性</h3>
            <div class="code">
                &lt;!-- 必填字段 --&gt;<br>
                &lt;input type="text" required&gt;<br><br>
                
                &lt;!-- 自动聚焦 --&gt;<br>
                &lt;input type="text" autofocus&gt;<br><br>
                
                &lt;!-- 禁用字段 --&gt;<br>
                &lt;input type="text" disabled&gt;<br><br>
                
                &lt;!-- 只读字段 --&gt;<br>
                &lt;input type="text" readonly value="只读内容"&gt;<br><br>
                
                &lt;!-- 自动完成 --&gt;<br>
                &lt;input type="email" autocomplete="email"&gt;
            </div>
            
            <div class="preview">
                <label for="required-field">必填字段:</label>
                <input type="text" id="required-field" required>
                
                <label for="autofocus-field">自动聚焦字段:</label>
                <input type="text" id="autofocus-field">
                
                <label for="disabled-field">禁用字段:</label>
                <input type="text" id="disabled-field" disabled value="此字段已禁用">
                
                <label for="readonly-field">只读字段:</label>
                <input type="text" id="readonly-field" readonly value="只读内容">
                
                <label for="autocomplete-field">自动完成字段 (邮箱):</label>
                <input type="email" id="autocomplete-field" autocomplete="email">
            </div>
        </div>
        
        <div class="example">
            <h3>表单验证</h3>
            <div class="code">
                &lt;!-- 模式验证 --&gt;<br>
                &lt;input type="text" pattern="[A-Za-z]{3}" title="三个字母"&gt;<br><br>
                
                &lt;!-- 最小和最大长度 --&gt;<br>
                &lt;input type="text" minlength="3" maxlength="8"&gt;<br><br>
                
                &lt;!-- 表单验证 --&gt;<br>
                &lt;form novalidate&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- 禁用浏览器默认验证 --&gt;<br>
                &lt;/form&gt;
            </div>
            
            <div class="preview">
                <label for="pattern-field">模式验证 (三个字母):</label>
                <input type="text" id="pattern-field" pattern="[A-Za-z]{3}" title="请输入三个字母">
                
                <label for="length-field">长度限制 (3-8个字符):</label>
                <input type="text" id="length-field" minlength="3" maxlength="8">
                
                <p><small>novalidate 属性可以禁用浏览器的默认验证，通常与 JavaScript 自定义验证一起使用</small></p>
            </div>
        </div>
    </section>
    
    <section>
        <h2>完整表单示例</h2>
        <div class="example">
            <h3>用户注册表单</h3>
            <div class="preview">
                <form action="#" method="post" onsubmit="event.preventDefault(); alert('注册表单已提交（示例）')">
                    <fieldset>
                        <legend>用户注册</legend>
                        
                        <label for="reg-username">用户名:</label>
                        <input type="text" id="reg-username" name="username" required minlength="4" maxlength="20">
                        
                        <label for="reg-email">电子邮箱:</label>
                        <input type="email" id="reg-email" name="email" required>
                        
                        <label for="reg-password">密码:</label>
                        <input type="password" id="reg-password" name="password" required minlength="8">
                        
                        <label for="reg-confirm-password">确认密码:</label>
                        <input type="password" id="reg-confirm-password" name="confirm_password" required minlength="8">
                        
                        <label for="reg-birthday">出生日期:</label>
                        <input type="date" id="reg-birthday" name="birthday">
                        
                        <p><strong>性别:</strong></p>
                        <div class="radio-group">
                            <input type="radio" name="gender" id="reg-male" value="male">
                            <label for="reg-male">男</label>
                        </div>
                        <div class="radio-group">
                            <input type="radio" name="gender" id="reg-female" value="female">
                            <label for="reg-female">女</label>
                        </div>
                        
                        <label for="reg-country">国家/地区:</label>
                        <select id="reg-country" name="country">
                            <option value="">请选择</option>
                            <option value="cn">中国</option>
                            <option value="us">美国</option>
                            <option value="uk">英国</option>
                            <option value="jp">日本</option>
                            <option value="other">其他</option>
                        </select>
                        
                        <p><strong>兴趣爱好:</strong></p>
                        <div class="checkbox-group">
                            <input type="checkbox" name="interests[]" id="reg-reading" value="reading">